---
title: Retro Grid
date: 2023-11-23
description: An animated scrolling retro grid effect
author: nyxb
published: true
video: https://cdn.nyxbui.design/retro-grid.mp4
---

<ComponentPreview name="retro-grid-demo" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx nyx@latest add retro-grid
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="retro-grid" />

<Step>Update the import paths to match your project setup.</Step>

<Step>Update `tailwind.config.js`</Step>

Add the following animations to your `tailwind.config.js` file:

```js title="tailwind.config.js" {5-13}
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      animation: {
        grid: "grid 15s linear infinite",
      },
      keyframes: {
        grid: {
          "0%": { transform: "translateY(-50%)" },
          "100%": { transform: "translateY(0)" },
        },
      },
    },
  },
};
```

</Steps>

</TabsContent>

</Tabs>

## Props

| Prop             | Type     | Default  | Description                                   |
| ---------------- | -------- | -------- | --------------------------------------------- |
| `className`      | `string` | `-`      | Additional CSS classes for the grid container |
| `angle`          | `number` | `65`     | Rotation angle of the grid in degrees         |
| `cellSize`       | `number` | `60`     | Grid cell size in pixels                      |
| `opacity`        | `number` | `0.5`    | Grid opacity value between 0 and 1            |
| `lightLineColor` | `string` | `"gray"` | Grid line color in light mode                 |
| `darkLineColor`  | `string` | `"gray"` | Grid line color in dark mode                  |
